<template>
  <div>
    <yj-dialog
      :modal="dialog.modal"
      :width="dialog.width"
      :title="dialog.title"
      :dialogVisible="dialog.visible"
      @close="closeDialog"
    >
      <template slot="dialog-content">
        <el-form
          :model="form"
          :rules="rules"
          ref="userForm"
          size="mini"
          label-width="100px"
        >
          <el-form-item label="轮播图片" prop="imgUrl">
            <el-upload
              :auto-upload="false"
              class="avatar-uploader"
              :on-change="onChangeFile"
              accept="image/png,image/jpg,image/jpeg"
              :show-file-list="false">
              <el-image v-if="form.imgUrl" fit="contain" style="width: 178px;height: 178px" :src="form.imgUrl" class="avatar"/>
              <i v-else class="el-icon-plus avatar-uploader-icon"></i>
            </el-upload>
            <div v-if="form.imgUrl" class="delele-img" @click="removeFile">删除</div>

          </el-form-item>


        </el-form>

        <div slot="footer" style="text-align: center" class="dialog-footer">
          <el-button size="mini" @click="cancelDialogBtn('userForm')"
          >取 消
          </el-button
          >
          <el-button
            size="mini"
            type="primary"
            @click="saveDialogBtn('userForm')"
          >确 定
          </el-button
          >
        </div>
      </template>
    </yj-dialog>
    <table-frame
      ref="frame"
      :removeKey="prop.removeKey"
      :getDataUrl="prop.getDataUrl"
      :removeUrl="prop.removeUrl"
      :searchShow="prop.searchShow"
      :operateShow="prop.operateShow"
      :location="prop.location"
      :searchModel="prop.searchModel"
      :reloadTable="prop.reloadTable"
      :colunmsCount="prop.colunmsCount"
      :showDelBtn="prop.showDelBtn"
      :delBtnPermission="prop.delBtnPermission"
    >
      <template slot="custom">
        <div class="swiper">
          <div class="tip">
            <h2>小程序首页轮播图({{ chooseSwipers.length }}张)</h2>
          </div>
          <el-carousel indicator-position="outside" height="400px">
            <el-carousel-item v-for="item in chooseSwipers" :key="item.id">
              <el-image fit="contain" style="width:100%;height: 100%" :src="item.imgUrl"/>
            </el-carousel-item>

          </el-carousel>
        </div>
      </template>


      <template slot="top_operate" slot-scope="currentRow">

        <auth :code="permission.chooseAdd">
          <template slot="auth">
            <el-button
              type="success"
              icon="el-icon-check"
              @click="chooseAdd(currentRow)"
              size="mini"
            >选定为轮播图
            </el-button
            >
          </template>
        </auth>

        <auth :code="permission.chooseRemove">
          <template slot="auth">
            <el-button
              type="danger"
              icon="el-icon-close"
              @click="chooseDel(currentRow)"
              size="mini"
            >移除所选轮播图
            </el-button
            >
          </template>
        </auth>


        <auth :code="permission.add">
          <template slot="auth">
            <el-button
              type="primary"
              icon="el-icon-plus"
              @click="add()"
              size="mini"
            >添加待选轮播图
            </el-button
            >
          </template>
        </auth>

      </template>

      <template slot="columns">
        <el-table-column align="center" prop="content" label="是否选上">
          <template slot-scope="scope">
            {{ scope.row.choose ? '已选' : '未选' }}
          </template>
        </el-table-column>
        <el-table-column align="center" prop="content" label="轮播图">
          <template slot-scope="scope">
            <el-image fit="contain" style="width:450px;height: 150px" :preview-src-list="[scope.row.imgUrl]"
                      :src="scope.row.imgUrl"/>
          </template>
        </el-table-column>
        <el-table-column
          prop="createTime"
          sortable
          width="250"
          align="center"
          label="创建时间"
        ></el-table-column>
        <el-table-column
          prop="updateTime"
          sortable
          align="center"
          width="250"
          label="更新时间"
        ></el-table-column>
      </template>
      <template v-if="prop.operateShow" slot="operate">
        <el-table-column fixed="right" align="center" label="操作" width="200">
          <template slot-scope="scope">
            <auth :code="permission.chooseAdd">
              <template slot="auth">
                <el-button
                  type="text"
                  v-if="!scope.row.choose"
                  icon="el-icon-check"
                  @click="choose(scope.row.id)"
                  size="mini"
                >选定轮播图
                </el-button
                >
              </template>
            </auth>

            <auth :code="permission.chooseRemove">
              <template slot="auth">
                <el-button
                  type="text"
                  icon="el-icon-close"
                  v-if="scope.row.choose"
                  @click="delChoose(scope.row.id)"
                  size="mini"
                >移除选定
                </el-button
                >
              </template>
            </auth>

            <auth :code="permission.del">
              <template slot="auth">
                <el-button
                  type="text"
                  icon="el-icon-delete-solid"
                  @click="del(scope.row.id)"
                  size="mini"
                >
                  删除轮播图
                </el-button
                >
              </template>
            </auth>

          </template>
        </el-table-column>
      </template>
    </table-frame>
  </div>
</template>
<script>
import utils from "../../../utils/CommonUtils";
import {Loading} from 'element-ui';
let _this = {};
import searchModel from "./Search.vue";

export default {
  data() {
    return {
      dialog: {
        width: "40%",
        title: "上传轮播图",
        visible: false,
        modal: true,
      },
      prop: {
        searchShow: true,
        operateShow: true,
        location: "",
        getDataUrl: "/swiper/pageList",
        removeUrl: "/swiper/delete/?",
        searchModel: searchModel,
        reloadTable: false,
        showDelBtn: true,
        isPage: true,
        delBtnPermission: "swiper:del"
      },
      form: {
        imgUrl: ""
      },

      permission: {
        add: "swiper:add",
        del: "swiper:del",
        chooseAdd: "swiper:choose:add",
        chooseRemove: "swiper:choose:del",
      },
      chooseSwipers: [],

      rules: {
        imgUrl: [{required: true}]
      },
      URL: {
        chooseSwipers: "/swiper/listChoose",
        save: "/swiper/save",
        setChoose: "/swiper/setChoose/?",
        removeChoose: "/swiper/removeChoose/?",
        remove: "/swiper/delete/?",
      },
    };
  },
  created() {
    this.getChooseSwiper()
  },
  methods: {
    chooseAdd(scope){
      let rows = scope.slotScope.rows;
      if (rows.length <= 0) {
        this.$warning("请至少勾选一个轮播图")
        return;
      }
      let ids = [];
      rows.forEach(u => {
        ids.push(u.id);
      })
      this.choose(ids.join(","));
    },chooseDel(scope){
      let rows = scope.slotScope.rows;
      if (rows.length <= 0) {
        this.$warning("请至少勾选一个轮播图")
        return;
      }
      let ids = [];
      rows.forEach(u => {
        ids.push(u.id);
      })
      this.delChoose(ids.join(","));
    },
    choose(id) {
      this.$confirm("是否选上?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$post(this.URL.setChoose.replace("?", id), {}).then(res => {
          if (res.R) {
            this.$success("操作成功");
            this.getChooseSwiper();
            this.reloadTable();
          }
        })
      });

    },

    delChoose(id) {
      this.$confirm("是否移除?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$post(this.URL.removeChoose.replace("?", id), {}).then(res => {
          if (res.R) {
            this.$success("操作成功");
            this.getChooseSwiper();
            this.reloadTable();
          }
        })
      });

    },
    getChooseSwiper() {
      this.$get(this.URL.chooseSwipers, {}).then(res => {
        if (res.R) {
          this.chooseSwipers = res.data
        }
      })
    },

    del(id) {
      this.$confirm("此操作将永久删除已选数据, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$del(this.URL.remove.replace("?", id), {}).then((res) => {
          if (res.R) {
            this.$success("已删除");
            this.getChooseSwiper();
            this.reloadTable();
          }
        });
      });
    },
    save() {
      let loading = Loading.service({});
      this.$postJson(this.URL.save, this.form).then(res => {
        loading.close()
        if (res.R) {
          this.$success("上传成功");
          this.dialog.visible = false;
          this.reloadTable();
        }
      })
    },
    reqResult(res) {
      if (res.R) {
        this.$success("操作成功");
        this.dialog.visible = false;
        this.reloadTable();
      }
    },

    reloadTable() {
      _this = this;
      this.prop.reloadTable = true;
      setTimeout(() => {
        _this.prop.reloadTable = false;
      }, 1000);
    },
    add() {
      this.dialog.visible = true;
      this.removeFile();
    },
    onChangeFile(file, list) {
      if (file.size > this.$globConfig.fileMaxSize) {
        // 文件大于5m
        this.$warning("文件不能大于" + (this.$globConfig.fileMaxSize / 1024 / 1024) + "MB");
        return;
      }
      let that=this;
      utils.fileToBase64(file).then(res => {
        that.form.imgUrl = res;
      })
    }
    , removeFile() {
      this.form.imgUrl = "";
    },
    // 取消
    cancelDialogBtn(userForm) {
      this.dialog.visible = false;
      this.form.imgUrl = "";
      this.$refs[userForm].resetFields();
    },
    closeDialog() {
      this.$emit("closeModal", false);
    }, saveDialogBtn(form) {
      this.$refs[form].validate((valid) => {
        if (valid) {
          this.save();
        } else {
          this.$warning("缺少必填数据");
          return false;
        }
      });
    },
  },
};
</script>
<style>
</style>
<style scoped>
.swiper {
  background: white;
  margin-bottom: 20px;
  text-align: center;
}

>>> .el-button [class*=el-icon-] + span {
  margin-left: 0px !important;
}


.delele-img {
  font-size: 14px;
  width: 178px;
  cursor: pointer;
  text-align: center;
}

.avatar-uploader >>> .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

</style>
